<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>规则详情</title>
	<link rel="stylesheet" href="/layui/css/layui.css">
	<style type="text/css">
		body{
			background: #f0f2f5;
		}
		/*公共头部带搜索*/
		.public_container{
			margin: 20px;
			background: #fff;
		}
		.public_title_container{
			height: 54px;
			padding: 0 20px;
			font-size: 14px;
			display: flex;
			align-items: center;
			background: #f9f9f9;
			border-bottom: 1px solid #f0f0f0;
			justify-content: space-between;
		}
		.public_title_container a{
			color: #2f54eb;
			cursor: pointer;
		}
		.public_buttonSearch_container{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px 20px 5px 20px;
			background: #fff;
		}
		/*公共头部带搜索 end*/
		/*雷达上半部分*/
		.radardetail_main_container{
			display: flex;
			padding:20px 20px 0 20px;
		}

		.radardetail_condition_container{
			padding-right: 20px;
			padding-bottom: 10px;

		}
		.radardetail_mainInfo_container{
			padding: 25px 24px 5px;
			background: #fff;
			flex: 1;
			margin-right: 16px;
		}
		.radardetail_mainInfo_content{
			overflow: hidden;
		}
		.radardetail_mainInfo_content li{
			margin-bottom: 20px;
			width: 100%;
			float: left;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}
		.radardetail_mainInfo_content li span{
			color: rgba(0,0,0,.45);
			font-size: 14px;
		}
		.radardetail_mainInfo_content li p{
			color: #222;
			font-size: 14px;
			flex: 1;
		}
		.radardetail_dataDetail_container{
			flex: 1;
			background: #fff;
		}
		.radardetail_dataDetail_container h2{
			padding: 17px 0 12px 24px;
			border-bottom: 1px solid #e9ebf3;
			font-size: 15px;
			font-weight: 500;
			color: #333;
			line-height: 21px;
		}
		.radardetail_dataDetail_content{
			padding: 37px 24px;
		}
		.radardetail_dataDetail_list{
			background: #fbfdff;
			border: 1px solid #daedff;
			display: flex;
		}
		.radardetail_dataDetail_list li{
			flex: 1;
			margin: 20px 0;
			border-right: 1px solid #e9e9e9;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.radardetail_dataDetail_list li b{
			font-size: 24px;
			font-weight: 500;
			color: #000;
			line-height: 33px;
		}
		.radardetail_dataDetail_list li span{
			font-size: 13px;
			font-weight: 400;
			color: rgba(0,0,0,.65);
			line-height: 18px;
		}
		/*下半部分*/
		.ruleSOP_container{
			padding: 0 20px 20px 20px;
		}
		.creatSop_listTitle_container{
			position: relative;
			padding: 10px 0;
		}
		.creatSop_list_container{
			padding-left: 20px;
			border-left: 1px dashed #eee;
		}
		.creatSop_listTitle_container svg{
			position: absolute;
			left: -29px;
			top: 11px;
		}
		.creatSop_listTitle_container h4{
			font-size: 14px;
			color: rgba(0,0,0,.85);
			font-weight: 500;
			flex: 1;
		}
		.creatSop_listTitle_container p{
			margin-top: 4px;
			font-size: 13px;
			font-weight: 400;
			color: rgba(0,0,0,.45);
			line-height: 24px;
		}
		.creatSop_listGroupChat_container{

		}
		.creatSop_listGroupChat_container h2{
			padding-left: 12px;
			font-size: 15px;
			font-weight: 400;
			color: #3f3f3f;
			line-height: 18px;
			position: relative;
		}
		.creatSop_listGroupChat_container h3{
			padding-left: 12px;
			font-size: 13px;
			font-weight: 400;
			color: rgba(0,0,0,.45);
			line-height: 18px;
			position: relative;
		}
		.creatSop_listGroupChat_container p{
			color: rgba(0,0,0,.75);
			font-size: 12px;
			padding: 7px 0 10px 0;
		}
		.creatSop_listGroupChat_container h3::before{
			content: "";
			position: absolute;
			left: 0;
			top: 2px;
			width: 3px;
			height: 13px;
			background: #1890ff;
		}
		.creatSop_listGroupChat_container h2::before{
			content: "";
			position: absolute;
			left: 0;
			top: 2px;
			width: 3px;
			height: 13px;
			background: #1890ff;
		}
		.creatSop_list_content{
			position: relative;
			background: #fbfbfb;
			border: 1px solid #f2f2f2;
			padding: 14px 0 5px 16px;
		}
		.creatSop_list_content ul li{

		}
		.creatSop_list_content ul li span{
			font-size: 14px;
			color: #333;
		}
		.creatSop_list_content ul li a{
			font-size: 14px;
			color: #1890ff;
		}
		.creatSop_list_content ul li img{
			width: 80px;
			height: 80px;
			display: block;
			margin-top: 12px;
		}
		.creatSop_list_bg{
			width: 600px;
			margin-top: 12px;
			background: #fff;
			box-shadow: 0 0 2px 0 rgba(0,0,0,.04);
			border-radius: 2px 16px 16px 24px;
			border: 1px solid #f6f6f6;
			padding: 10px 16px;
			word-break: break-all;
		}
	</style>
</head>
<body>
	<div class="radardetail_main_container">
		<div class="radardetail_mainInfo_container">
			<ul class="radardetail_mainInfo_content">
				 <li>
					<span>创建者：</span>
					<p>{$personage->founder}</p>
				</li>
				<li>
					<span>创建时间：</span>
					<p> {date('y-m-d H:i:s',$personage->ctime)}</p>
				</li>
				<li>
					<span>任务名称：</span>
					<p><input type="text" onblur="personage('{$personage->id}')" id="personage" value="{$personage->rule_name}"  class="layui-input"></p>
				</li>
				<li>
					<span>执行员工：</span>
					<p>{loop $user_list as $value}【{$value->name}】{/loop}</p>
				</li>
			</ul>
		</div>
	</div>
	

	<div class="public_container">
		<div class="public_content">
			<div class="public_buttonSearch_container">
				<div class="public_buttonSearch_content">
					<p>共{$count}条推送计划</p>
				</div>
			</div>
			<div class="ruleSOP_container">
				
				<div class="creatSop_mainData_container">
					<div class="public_buttonSearch_content" >
						<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" style="background-color:#3792bd" onclick="deletes('{$personage->id}')">移除员工</button>
						<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="addGrou('{$personage->id}')">添加员工至该规则</button>
					</div>
					<!-- 列表 -->
					{loop $xiangqing as $xiangqings}
					<div class="creatSop_list_container">
						<div class="creatSop_listTitle_container">
							<svg t="1607326862222" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4286" width="17" height="17"><path d="M111.68426667 274.97813333c-15.29173333 0-27.8528-12.56106667-27.8528-27.8528 0-5.46133333 1.6384-10.92266667 4.36906666-15.29173333 43.69066667-66.08213333 103.2192-122.33386667 172.032-161.65546667 13.1072-7.64586667 30.58346667-3.2768 38.22933334 10.37653334 7.64586667 13.1072 3.2768 30.58346667-10.37653334 38.22933333-61.16693333 34.95253333-114.14186667 85.1968-152.91733333 144.1792-5.46133333 7.64586667-14.19946667 12.01493333-23.48373333 12.01493333z m800.63146666 0c-9.28426667 0-18.0224-4.9152-23.48373333-12.56106666-38.77546667-58.9824-91.7504-108.68053333-152.91733333-144.1792-13.65333333-7.64586667-18.56853333-24.576-10.92266667-37.6832s24.576-18.56853333 37.6832-10.92266667c0.54613333 0 0.54613333 0.54613333 1.09226667 0.54613333 68.8128 39.3216 128.34133333 95.57333333 172.032 161.65546667 8.192 13.1072 4.9152 30.03733333-8.192 38.77546667-4.36906667 2.73066667-9.8304 4.36906667-15.29173334 4.36906666zM752.29866667 818.3808c-3.2768-3.2768-7.09973333-4.9152-10.92266667-6.5536 91.20426667-69.35893333 149.64053333-178.5856 149.64053333-301.4656 0-209.16906667-169.84746667-379.01653333-379.01653333-379.01653333-208.62293333 0-379.01653333 169.84746667-379.01653333 379.01653333 0 122.88 58.9824 232.10666667 149.64053333 301.4656-3.82293333 1.09226667-7.64586667 3.2768-10.92266667 6.5536l-76.45866666 76.45866667c-5.46133333 4.9152-8.192 12.01493333-8.192 19.6608 0 15.29173333 12.56106667 27.8528 27.8528 27.8528 7.09973333 0 14.19946667-2.73066667 19.6608-8.192l76.45866666-76.45866667c6.00746667-6.00746667 8.73813333-13.65333333 8.192-21.2992 56.79786667 33.86026667 122.33386667 52.97493333 192.78506667 52.97493333 70.4512 0 136.53333333-19.6608 193.3312-52.97493333-0.54613333 7.64586667 1.6384 15.29173333 7.64586667 21.2992l76.45866666 76.45866667c4.9152 5.46133333 12.01493333 8.192 19.6608 8.192s14.7456-2.73066667 19.6608-8.192a27.68853333 27.68853333 0 0 0 0-39.3216l-76.45866666-76.45866667z m-79.18933334-138.71786667c-5.46133333 5.46133333-12.56106667 8.192-19.6608 8.192-7.64586667 0-14.7456-2.73066667-19.6608-8.192L492.3392 538.2144c-5.46133333-5.46133333-8.192-12.56106667-8.192-19.6608V286.99306667c0-15.29173333 12.56106667-27.8528 27.8528-27.8528s27.8528 12.56106667 27.8528 27.8528v220.63786666L673.10933333 640.88746667c10.92266667 10.37653333 10.92266667 27.8528 0 38.77546666z" fill="#b4b9c3" p-id="4287"></path></svg>
							<h4>加入规则当天，{$xiangqings->duration}后提醒发送（<span class="rule_name">{$personage->rule_name}</span>）</h4>
							<p>共{$xiangqings->count}条消息</p>
						</div>
						<div class="creatSop_list_content">
							<!-- <div class="creatSop_listGroupChat_container">
								<h3>处于该状态的客户：</h3>
								<p>
									{loop $xiangqings->user as $arrs}
										【{$arrs->name?$arrs->name:'默认群'}】
									{/loop}
								</p>
							</div> -->
							<div class="creatSop_listGroupChat_container">
								<h3>推送消息数：共{$xiangqings->count}条</h3>
							</div>
							<ul>
								<!-- 文字 -->
								{if $xiangqings->texts}
								{loop $xiangqings->texts as $texts}
								<div class="creatSop_listGroupChat_container"><h2>文本：输入后点击他处即修改</h2></div>
								<li class="creatSop_list_bg">
									<span><input type="text" onblur="text('{$xiangqings->id}')" name="text{$xiangqings->id}" value="{$texts}"  class="layui-input"></span>
								</li>
								{/loop}
								{/if}
								<!-- 图片 -->
								{if $xiangqings->files}
								{loop $xiangqings->files as $key=>$files}
								<div class="creatSop_listGroupChat_container"><h2>图片：点击图片修改</h2></div>
								<li>
									<img src="{$files}" onclick="file('{$xiangqings->id}','{$key}')"  id="srcs{$key}">
									<input type="file" hidden id="hide{$key}" />
									<input type="hidden" value="{$files}" id="file{$key}" name="file{$xiangqings->id}">
								</li>
								{/loop}
								{/if}
								<!-- 链接 -->
								{if $xiangqings->urls}
								{loop $xiangqings->urls as $urls}
								<div class="creatSop_listGroupChat_container"><h2>连接：输入后点击他处即修改</h2></div>
								<li class="creatSop_list_bg">
									<span><input type="text" onblur="url('{$xiangqings->id}')" name="url{$xiangqings->id}" value="{$urls}"  class="layui-input"></span>
									<!-- <a href="{$urls}">{$urls}</a> -->
								</li>
								{/loop}
								{/if}
							</ul>
						</div>
					</div>
					{/loop}

				</div>
			</div>
		</div>

	</div>
	
	<script src="/cdn/jquery.js"></script>
	<script src="/layui/layui.js"></script>
	<script src="/js/ajax.js"></script>
	<script type="text/javascript">
		layui.use('form', function(){
		  var form = layui.form;
		  	
		  //监听提交
		  form.on('submit(formDemo)', function(data){
		    layer.msg(JSON.stringify(data.field));
		    return false;
		  });
		  form.render('select');
		});
		layui.use('laydate', function(){
  			var laydate = layui.laydate;
  			//日期范围
  			  laydate.render({
  			    elem: '#test6'
  			    ,range: true
  			  });
  		});
  		function addGrou(id){
			layer.open({
				type: 2,
				title: '添加员工',
				shadeClose: true,
				shade: 0.2,
				area: ['700px', '600px'],
				content: 'selectuser-'+id+'.html'
			}); 
  		}
  		function deletes(id){
  			layer.open({
				type: 2,
				title: '删除员工',
				shadeClose: true,
				shade: 0.2,
				area: ['700px', '600px'],
				content: 'deletes-'+id+'.html'
			}); 
  		}
		function text(id){
			// var text = $("#text"+id).val();
			var checkboxs = document.getElementsByName("text"+id);
	        var check_val = [];
	        for(i=0; i<checkboxs.length; i++){
		        check_val.push(checkboxs[i].value);
		    }
			myAjaxPost(false, true, '', { text:check_val,id:id}, function (resp) {
				if(resp.status == 'success'){
					layer.msg(resp.msg);
				}
				layer.msg(resp.msg);
			})
		}
		function url(id){
			// var text = $("#text"+id).val();
			var checkboxs = document.getElementsByName("url"+id);
	        var check_val = [];
	        for(i=0; i<checkboxs.length; i++){
		        check_val.push(checkboxs[i].value);
		    }
			myAjaxPost(false, true, '', { url:check_val,id:id}, function (resp) {
				if(resp.status == 'success'){
					layer.msg(resp.msg);
				}
				layer.msg(resp.msg);
			})
		}
		function personage(id){
			var personage = $("#personage").val();
			myAjaxPost(false, true, '', { personage:personage,personage_id:id}, function (resp) {
				if(resp.status == 'success'){
					layer.msg(resp.msg);
					$(".rule_name").html(personage);
				}
				layer.msg(resp.msg);
			})
		}

		function file(id,key){
			$("#hide"+key).trigger("click");
        	openuploadsone(id,key);
		}
		function openuploadsone(id,key) {
        $("#hide"+key).change(function () {
            var formdata = new FormData();
            formdata.append('file', $("#hide"+key)[0].files[0]); //获取file信息
            $.ajax({
                url: "add_file.html",
                type: 'post',
                data: formdata,
                cache: false,
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function (e) {
                    if (e.status == "success") {
                        var data = e.data.filePath;
                    	$("#srcs"+key).attr('src',data);
                        $("#file"+key).attr('value',data);
                        var checkboxs = document.getElementsByName("file"+id);
				        var check_val = [];
				        for(i=0; i<checkboxs.length; i++){
					        check_val.push(checkboxs[i].value);
					    }
					    myAjaxPost(false, true, '', { file:check_val,id:id}, function (resp) {
							if(resp.status == 'success'){
								 layer.msg(e.msg, '');
							}
						})
                    } else {
                        layer.msg(e.msg, '');
                    }
                }
            });
        });
    }
	</script>
</body>
</html>